<template>
	<view class="content">
		  <view class="item-top">
			  <image class='top-img' :src="userobj.userinfo.avatar || '../../static/image/bg_img.png'">
			  <view class="item-conent">
				<view class="item-tops">
					<view>{{userobj.userinfo.nickname}}</view>
					<image class='bot-img' v-if="userobj.userinfo.gender == 1" src="../../static/img/nanicon.png">
					<image class='bot-img' v-else src="../../static/img/nvicon.png">
				</view>
				<view class="bot-text" @click="dianji" v-if="status==1">设置备注</view>
				<input type="text"  @blur="chang" v-else value="" placeholder="请输入备注" />
			  </view>
		  </view> 
		  <view class="item-top">
			  <view><text>来源</text>
			  <text class="huitext" v-if="souce==1">对方通过搜索手机号添加</text>
			  <text class="huitext" v-if="souce==2">对方通过搜索ID号添加</text>
			  <text class="huitext" v-if="souce==3">对方通过群添加</text>
			  <text class="huitext" v-if="souce==4">对方通过二维码添加</text>
			  <text class="huitext" v-if="souce==5">对方通过名片添加</text>
			  </view>
		  </view>
<!-- 		 <view class="cu-form-group margin-top">
			<view class="title">加入黑名单</view>
			<switch @change="SwitchA" :class="switchA?'checked':''" :checked="switchA?true:false"></switch>
		 </view> -->
		  <view class="padding flex flex-direction" style="margin-top: 30upx;">
		  	<button class="cu-btn bg-grey lg" v-if="userobj.is_friend == 2 && item.status ==1" @click="agreed">通过验证</button>
			<button class="cu-btn bg-grey lg juj" v-if="userobj.is_friend == 2 && item.status ==1" @click="refused">拒绝</button>
			<button class="cu-btn bg-grey lg" v-if="userobj.is_friend == 1" @click="xiaoxi">发送消息</button>
		  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				switchA: false,
				bio:'',
				status:1,
				souce: '',
				remarks:"",
				up: '',
				id: '',
				item: '',
				userobj: '' //对象
			}
		},
		onShow() {
			this.$msgchat.initwork();
		},
		onLoad(options) {
			
			this.item = JSON.parse(options.item);
			console.log(this.item)
			this.souce = this.item.souce || 1;
			this.initDat(this.item.user_id);
		},
		methods: {
			//初始数据
			initDat(uids){
				this.$common.requests('/api/friend/is_friend',{uid: uids}).then(res => {
					if(res.data.code == 1){
						if(res.data.data.userinfo.avatar){
							res.data.data.userinfo.avatar = this.$common.baseUrl + res.data.data.userinfo.avatar;
						}
						this.userobj = res.data.data;
					}
				})
			},
			SwitchA(e) {
				this.switchA = e.detail.value ;
				var obj = {
					id : this.item.id
				}
				if(this.switchA == true){
					this.$common.requests('/api/black/lahei', obj).then(res => {
					})
				}else if(this.switchA == false){
					this.$common.requests('/api/black/nohei', obj).then(res => {
					})
				}
			},
			dianji(){
				this.status=2;
			},
			chang(data){
				if (data.detail.value==""){
					return 
				}else{
					 this.remarks = data.detail.value;
				}	
			},
			xiaoxi(){
				console.log(this.userobj)
				uni.navigateTo({
					url:'../HM-chat/HM-chat?friend_id='+this.userobj.userinfo.id+'&nickname='+this.userobj.userinfo.nickname
				})
			},
			//同意
			agreed(){
				this.$common.requests('/api/Friend_add/okadd',{id:this.item.id,remarks:this.remarks}).then(res => {
					uni.navigateTo({
						url: '../addFriend/addFriend' 
					});
				})
			},
			//拒绝
			refused(){
				this.$common.requests('/api/Friend_add/noadd',{id: this.item.id}).then(res => {
					this.$api.msg(res.data.msg);
					this.status = 3;
				})
			}
		}
	}
</script>

<style lang="scss">
			 [v-cloak] {
	           display: none;
	         }
			 page{
				 height: 100vh;
				 background: $uni-color-bei;
			 }
	          .myco{
	            color: #333!important;
	          }
	          .content{
	            width: 100%;
	            margin: 0px;
	            color: #333;
	          }
			  .lg{
				  background: $uni-bt-color;
			  }
	          .item-top{
	            width: 100%;
	            display: flex;
	            justify-content: flex-start;
	            align-items: center;
	            background: #fff;
	            margin-top: 0.7rem;
	            padding: 0.7rem 0 0.7rem 1rem;
	          }
			  .juj{
				  background: red;
				  margin-top: 40upx;
			  }
	          .item-tops{
	            width: 100%;
	            display: flex;
	            justify-content: flex-start;
	            align-items: center;
	            color: #333;
	            font-weight: bold;
	          }
	          .item-conent{
	            margin-left: 0.7rem;
	            height: 2.8rem;
	            display: flex;
	            flex-direction: column;
	            justify-content: space-between;
	          }
	          .top-img{
	            width: 3.5rem;
				height: 3.5rem;
	            border-radius: 50%;
	          }
	          .bot-img{
	            width: 0.7rem;
				height: 0.7rem;
	            margin-left: 6px;
	          }
	          .bot-text{
	            color: blue;
	            font-size: 16px;
	          }
	          .huitext{
	            color: #999797;
	            margin-left: 1.5rem;
	          }
	          .my-inner{
	            width: 95%;
	            display: flex;
	            justify-content: space-between;
	          }
	          .mybut{
	            width: 88%;
	            margin: 0 auto;
	            background: #03a9f4;
	            color: #fff;
	            font-size: 21px;
	            margin-top: 1rem;
	            max-height: 45px;
	            line-height: 45px;
	          }
			  
			  // .aui-list .aui-list-item-inner {
			  //     position: relative;
			  //     min-height: 2.2rem;
			  // 	padding-right: 0.75rem;
			  //     width: 100%;
			  //     -webkit-box-sizing: border-box;
			  //     		box-sizing: border-box;
			  //     display: -webkit-box;
			  //     display: -webkit-flex;
			  //     display: flex;
			  //     -webkit-box-flex: 1;
			  //     -webkit-box-pack: justify;
			  //     -webkit-justify-content: space-between;
			  // 			justify-content: space-between;
			  //     -webkit-box-align: center;
			  //     -webkit-align-items: center;
			  // 			align-items: center;
			  // }
			  
			  // .aui-list .aui-list-item:active {
			  //     background-color: #f5f5f5;
			  // }
</style>
